import React from 'react';
import PropTypes from 'prop-types';
import { Table, Popconfirm, Button,Card,Switch} from 'antd';
import styles from './index.less';
import StockRequireApplyAddDialog from '../StockRequireApplyAddDialog';
import { connect } from 'dva';

class StockRequireApplyList extends React.Component{
   getRowClassName = (record, index) => {
      let className = '';
      className = index % 2 === 0 ? styles.oddRow : styles.evenRow;
      return className;
    }

   initColumns = () =>{
      return ([
         {
            key:'id',
            title: '序号',
            width:80,
            align:'center',
            render:(txt,record,index)=>index + 1
         }, 
         {
            title: '卡号',
            dataIndex: 'cardNo',
            align:'center'
         }, 
          
         {
            title: '患者姓名',
            dataIndex: 'patName',
            align:'center'
         }, 
         {
            title: '消耗项目',
            dataIndex: 'mimName',
            align:'center'
         }, 
         {
            title: '规格',
            dataIndex: 'spec',
            align:'center'
         }, 
         {
            title: '数量',
            dataIndex: 'qty',
            align:'center'
         }, 
         {
            title: '单位',
            dataIndex: 'uom',
            align:'center'
         }, 
         {
            title: '条码',
            dataIndex: 'barcode',
            align:'center'
         }, 
         {
            title: '消耗部门',
            dataIndex: 'consumeDept',
            align:'center'
         }, 
         {
            title: '使用方式',
            dataIndex: 'userMethod',
            align:'center'
         }, 
         {
            title: '备注',
            dataIndex: 'remark',
            align:'center'
         }, 
          {
            title: '操作',
            align:'center',
            render: (text, record) => {
              return (
                 <div>
                  <Button type="primary" size="small" onClick={() => this.handleUpdate(record)}>修改</Button>
                  <Popconfirm title="确定删除此条申请？" okText="确定" cancelText="取消" onConfirm={() => this.handleDelete(record.id)}>
                     <Button style={{margin:"0 1rem"}} type="danger" size="small">删除</Button>
                  </Popconfirm>
                </div>
              );
            },
          }
        
        
        ]);
   }

   handleUpdate = (currData) => {
      this.props.dispatch({
         type:'stockrequireapply/update',
         payload:currData
      });
   }

   handleDelete = (id) => {
      this.props.dispatch({
         type:'stockrequireapply/delete',
         payload:id
      });
   }

   handleSwitchChange = (checked) => {
      this.props.dispatch({
         type:'stockrequireapply/validDefuncInd',
         payload:checked
      });
   }

render (){
   const { applyList} = this.props;
   return (
      <div className={styles.listarea}>
      <Card title={
         <div>
            <span className={styles.tableTitle}>物品申请列表</span>
            <span className={styles.switchDesc}>仅显示有效</span>
            <Switch className={styles.switchBut} size="small" onChange={this.handleSwitchChange} />
         </div>
      } extra={
         <StockRequireApplyAddDialog>
            <Button type="primary" size="middle">新增</Button>
         </StockRequireApplyAddDialog>
      }> 
      <Table
        pagination={{
           hideOnSinglePage:true,
           defaultPageSize:5
        }}
        dataSource={applyList}
        columns={this.initColumns()}
        bordered
        rowClassName={this.getRowClassName}
        className={styles.requiretablerow}
        rowKey={(record=>record.id)}
      />
      </Card>
      </div>
    )
}

};

StockRequireApplyList.propTypes = {
  onDelete: PropTypes.func.isRequired,
  applyList: PropTypes.array.isRequired,
};

export default connect()(StockRequireApplyList);